<template>
	<view class="freeTest">
		<image class="img_con" :src="'data:image/jpg;base64,'  + imageSrc" mode="widthFix"></image>
		<!-- <text class="message_font">
			{{message}}
		</text> -->
		<button class="btn" @click="startFace">开始人脸验证</button>
		<button class="btn" @click="getStudentquery">切换msg</button>
		<text class="message_font">{{ faceResult}}</text>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive,onMounted } from "vue";
	
	// let url = "http://192.168.100.3:7002/camera?cameraId=hqr123456"
	// let url = "ws://127.0.0.1:9000/"
	let url = "ws://192.168.100.100:6002?cameraId=1&force=1"
	
	let imageSrc:any = ref('')
	let faceResult:any = ref('')
	let startFace = ()=>{
		uni.request({
			url:"http://192.168.100.100:7002/startFace",
			 data: {
			    cameraId: "a123456"
			},
			method:"POST",
			success: (res:any) => {
				console.log('人脸检测结果',res);
				faceResult.value = res.data.result
			}
		})
	}
	let getStudentquery = ()=>{ 
		uni.request({
			url:"http://192.168.100.100:7001/AiSports/Student/Query",
			 data: {
			},
			method:"POST",
			success: (res:any) => {
				console.log('获取学生信息',res);
			}
		})
	}
	let connectSocket = ()=>{
		// #ifdef H5
		uni.connectSocket({
			url: url,
			success:(res:any)=>{
				console.log('我是Socket调用成功的回调=====>>>>',res);
				
			},
			fail: (error:any) => {
				console.log('我是Socket调用失败的回调=====>>>>',error);
			}
		});
		uni.onSocketOpen(function (res) {
		  console.log('WebSocket连接已打开！',res);
		});
		uni.onSocketMessage(function (message:any) {
			// if(!JSON.parse(message.data)){
			// 	return 
			// }
			let jsonData = JSON.parse(message.data)
			if( jsonData["ui-msg"] == "相机启动成功" ){
				// uni.showToast({
				// 	title:jsonData["ui-msg"],
				// 	icon:"none"
				// })
				// message.value =  "相机启动成功"
				console.log('我不是blob', message.value);
			}else{
				imageSrc.value = jsonData['image-data']
				console.log('我触发了');
			}
		 // if (message.data instanceof Blob) {
		 //           // showImage(message.data);
			// 	   bolbToBase64(message.data)
			// 	   console.log('我出发了');
		 //         } else {
			// 	   console.log('我不是blob',message.data);
		 //           message.value = message.data;
		 // }
		 // console.log('原始数据=====>>>', message.data);
		 // console.log('我是blob类型的数据？？', message.data instanceof Blob);
		}); 
		uni.onSocketError(function (res) {
		  console.log('WebSocket连接打开失败，请检查！',res);
		});
		// #endif
		
		// #ifdef APP-PLUS 
			
			
			
		uni.connectSocket({
			url: url,
			success:(res:any)=>{
				console.log('我是Socket调用成功的回调=====>>>>',res);
				
			},
			fail: (error:any) => {
				console.log('我是Socket调用失败的回调=====>>>>',error);
			}
		});
		uni.onSocketOpen(function (res) {
		  console.log('WebSocket连接已打开！',res);
		});
		uni.onSocketMessage(function (message:any) {
			// if(!JSON.parse(message.data)){
			// 	return 
			// }
			let jsonData = JSON.parse(message.data)
			if( jsonData["ui-msg"] == "相机启动成功" ){
				message.value =  jsonData["ui-msg"]
				console.log('我不是blob', message.value);
			}else{
				imageSrc.value = jsonData['image-data']
			}
		 // if (message.data instanceof Blob) {
		 //           // showImage(message.data);
			// 	   bolbToBase64(message.data)
			// 	   console.log('我出发了');
		 //         } else {
			// 	   console.log('我不是blob',message.data);
		 //           message.value = message.data;
		 // }
		 // console.log('原始数据=====>>>', message.data);
		 // console.log('我是blob类型的数据？？', message.data instanceof Blob);
		}); 
		uni.onSocketError(function (res) {
		  console.log('WebSocket连接打开失败，请检查！',res);
		});
		// #endif
		
	}
	
	
	
	onMounted(()=>{
		connectSocket()
	})
</script>
 
<style>
.freeTest{
	font-size: 1.5rem;
	text-align: center;
	width: 100vw;
	height: 100vh;
	
}
.img_con{
	width: 60vw;
	border: 1px solid red;
}
.message_font{
	background-color: red;
	width: 100vw;
	height: 8vh;
	display: block;
}
.btn{
	width: 50vw;
	margin: 3vh auto;
	background-color: #0aa1ed;
	color: aliceblue;
}
</style>

